<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="queryParams" label-width="100px">
          <el-row
            >
            <el-col :span="5">
              <div class="timebox">
                <el-form-item label="门店名称" prop="storeName">
                  <el-input
                    v-model="queryParams.storeName"
                    placeholder="请输入"
                    class="w-200"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="timebox">
                <el-form-item label="月份" prop="moon">
                  <el-date-picker
                    v-model="queryParams.moon"
                    type="month"
                    placeholder="选择月"
                    value-format="yyyy-MM"
                    class="w-160"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">门店完成率贡献值</div>
      </div>

      <div class="table_list">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="moon" label="月份"> </el-table-column>
          <el-table-column prop="areaName" label="所属区域"> </el-table-column>
          <el-table-column prop="storeName" label="门店" width="180px">
          </el-table-column>
          <el-table-column prop="poMoney" label="营业额"> </el-table-column>
          <el-table-column
            prop="soPro"
            label="业绩完成率"
            width="120px"
          ></el-table-column>
          <el-table-column prop="cuPro" label="总客量完成率" width="120px">
          </el-table-column>
          <el-table-column prop="caPro" label="加钟完成率" width="100px">
          </el-table-column>
          <el-table-column
            prop="soVal"
            label="业绩完成贡献值"
            width="120px"
          ></el-table-column>
          <el-table-column
            prop="cuVal"
            label="总客量贡献值"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="caVal"
            label="加钟贡献值"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="trVal"
            label="技师招聘及流失得分"
            width="140px"
          ></el-table-column>
          <el-table-column
            prop="mtVal"
            label="美团线上考核数据得分"
            width="150px"
          ></el-table-column>
          <el-table-column prop="sumVal" label="贡献值"></el-table-column>
          <el-table-column
            prop="basicMoney"
            label="贡献值底薪"
            width="110px"
          ></el-table-column>
          <el-table-column prop="lvStr" label="等级"></el-table-column>
          <el-table-column prop="soAward" label="业绩提成"></el-table-column>
          <el-table-column
            prop="rankingMoney"
            label="贡献值排名奖金"
            width="120px"
          ></el-table-column>
          <el-table-column prop="totalMoney" label="薪资合计"></el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
    
<script>
import { storeProCont } from "@/api/bpm/completeValue";
export default {
  name: "Eryuoastorecontribution",

  data() {
    return {
      tableData: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        moon: "",
        storeName: "",
      },
      total: 0,
    };
  },

  // 监听searchMonth 变化 就调取getList
  watch: {
    "queryParams.moon"(val) {
      this.getList();
    },
  },

  created() {
    // this.getList();
    // this.getSalaryTypeLists();
    const today = new Date();
    const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1);
    this.queryParams.moon = `${lastMonth.getFullYear()}-${(
      lastMonth.getMonth() + 1
    )
      .toString()
      .padStart(2, "0")}`;
  },

  mounted() {},

  methods: {
    // 搜索
    TrainingListQuery() {
      this.queryParams.pageNo = 1;
      this.getUserInterviewer();
    },

    // 重置
    TrainingListReset() {
      this.TrainingListQuery();
    },

    resQ() {
      this.queryParams.pageNo = 1;
      this.total = 0;
      this.tableData = [];
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },

    // 门店完成率贡献值
    getList() {
      this.loading = true;
      storeProCont(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.tableData = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>
          
          <style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}

.check {
  font-size: 12px;
  color: #0052d9;
}

.list_Stores {
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  .list_Stores_item {
    height: 46px;
    line-height: 46px;
    background: #ffffff;
    padding-left: 47px;
    border-bottom: 1px solid #e7e7e7;
  }
}

.AddRules_box {
  padding: 0 24px;
  .Rules_form_box {
    display: flex;
    .Rules_form_select {
      margin-right: 10px;
    }
  }
}

.radio_box {
  display: flex;
  margin-bottom: 10px;
}

.up_ipt {
  width: 300px;
  margin-right: 20px;
}
.down_ipt {
  width: 300px;
  margin-left: 10px;
}
.percentIcon {
  position: absolute;
  top: 55px;
  right: -15px;
}

.red {
  color: red;
}
.green {
  color: green;
}

.selectBox {
  margin-bottom: 20px;
}
</style>